<template>
  <div class="contract-diff-wrap">
    <div class="title-row">
      <div class="title-row-left">
        <img :src="newPic" alt="最新" >
        <div class="title-row-title">
          <ToolTip :content="docLeft.name" />
        </div>
        <div class="title-row-tail">{{ docLeft.username }}&nbsp;{{ docLeft.time | format('YYYY/MM/DD HH:mm') }}</div>
        <el-button class="diff-btn" type="text" @click="handleSelect(0)">选择</el-button>
      </div>
      <div class="title-row-right">
        <div class="title-row-title">
          <ToolTip :content="docRight.name" />
        </div>
        <div class="title-row-tail">{{ docRight.username }}&nbsp;{{ docRight.time | format('YYYY/MM/DD HH:mm') }}</div>
        <el-button class="diff-btn" type="text" @click="handleSelect(1)">选择</el-button>
      </div>
    </div>
    <div class="mergely-full-screen-8">
      <div class="mergely-resizer">
        <div v-loading="mergelyLoading" id="mergely"/>
      </div>
    </div>
    <el-dialog :visible.sync="visible" :before-close="handleClose" class="large-common-dialog-size">
      <Title :title="'请选择要对比的文档'" font-size="16px" style="margin-bottom: 24px;" />
      <template v-loading="loading" v-if="list.length">
        <u-table
          ref="tableRef"
          :data="list"
          :max-height="300"
          class="fb-table"
          element-loading-text="加载中..."
          @select="selectTable"
          @select-all="selectTable">
          <u-table-column align="center" label="选择" width="50">
            <template slot-scope="scope">
              <el-radio v-model="singleSelectId" :label="scope.row.id" :disabled="handleDisabledRadio(scope.row)" @change="changeRadio($event, scope.row)"><span/></el-radio>
            </template>
          </u-table-column>
          <u-table-column align="left" label="附件名称" min-width="300">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: space-between;">
                <div v-if="scope.row.id === list[0].id" class="latest">最新</div>
                <ToolTip :content="scope.row.name" class="attachment-name" />
                <el-button type="text" @click.native="handleDownload(scope.row.url, scope.row.name)">下载</el-button>
              </div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建人">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.username" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="上传时间" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.time | format('YYYY/MM/DD HH:mm:ss') }}</span>
            </template>
          </u-table-column>
        </u-table>
        <div class="dialog-footer">
          <div style="width: 25%;display: flex;">
            <el-button :disabled="!singleSelect.id" size="small" type="primary" class="related-btn" @click="confirmSelectData">确定</el-button>
            <el-button size="small" plain type="primary" class="back-btn cancel-btn-style" style="width:80px" @click="handleClose">取消</el-button>
          </div>
        </div>
      </template>
      <empty-placeholder v-else :text="'暂无数据'" style="margin-bottom: 24px" />
    </el-dialog>
  </div>
</template>

<script>
import { getAttachmentDiffList, getAttachmentContent } from '@/api/legal';
import tableSelections from '@/mixins/tableSelections';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { format } from '@/filters/date';
import Title from '@/components/Title';
import { downloadFile } from '@/utils';
import newPic from '@/assets/legal/new.png';
import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror.js';
import 'mergely/lib/mergely.js';
import 'mergely/lib/mergely.css';
import $ from 'jquery';
export default {
  components: { Title, EmptyPlaceholder },
  filters: { format },
  mixins: [tableSelections],
  data() {
    return {
      visible: false,
      list: [],
      idKey: 'id',
      contractId: null,
      loading: false,
      leftLoading: false,
      rightLoading: false,
      type: null, // 0左侧，1右侧
      tableRefName: 'tableRef',
      docLeft: {},
      docRight: {},
      singleSelect: {
        id: ''
      },
      newPic
    };
  },
  computed: {
    singleSelectId: {
      get() {
        return this.singleSelect.id;
      },
      set(id) {}
    },
    mergelyLoading() {
      return this.leftLoading || this.rightLoading;
    }
  },
  created() {
    this.contractId = Number(this.$route.params.id);
    this.getAttachmentDiffList();
  },
  mounted() {
    $(document).ready(function() {
      $('#mergely').mergely({
        cmsettings: { readOnly: true },
        line_numbers: false,
        fgColor: { a: '#4ba3fa', c: '#a3a3a3', d: '#ff7f7f', ca: '#4b73ff', cc: '#434343', cd: '#ff4f4f' }
      });
    });
  },
  methods: {
    initDiffDocs() {
      // 默认状态左侧展示最新，右侧展示时间最早
      this.docLeft = this.list.length && this.list[0];
      this.docRight = this.list.length && this.list.length > 1 && this.list[this.list.length - 1];
      if (this.docLeft.url) {
        this.leftLoading = true;
        this.getAttachmentContent(this.docLeft.url, res => {
          $('#mergely').mergely('lhs', res);
          this.leftLoading = false;
        });
      }
      if (this.docRight.url) {
        this.rightLoading = true;
        this.getAttachmentContent(this.docRight.url, res => {
          $('#mergely').mergely('rhs', res);
          this.rightLoading = false;
        });
      }
    },
    handleSelect(type) {
      this.type = type;
      this.singleSelect = !type ? this.docLeft : this.docRight;
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    changeRadio(e, data) {
      this.singleSelect = data;
    },
    handleDownload(url, name) {
      downloadFile(url, name);
    },
    handleDisabledRadio(row) {
      let result = false;
      if (!this.type && this.docRight.time) {
        result = row.recordId < this.docRight.recordId;
      } else if (this.type && this.docLeft.time) {
        result = row.recordId > this.docLeft.recordId;
      }
      return result;
    },
    getAttachmentContent(url, cb) {
      getAttachmentContent({ url }).then(res => {
        if (res.code === 200) {
          cb && cb(res.data);
        }
      }).catch(err => console.error(err.message));
    },
    getAttachmentDiffList() {
      this.loading = true;
      getAttachmentDiffList(this.contractId).then(res => {
        if (res.code === 200) {
          res.data.forEach(it => {
            it.id = Number(it.recordId + it.uid);
          });
          this.list = res.data;
          this.loading = false;
          this.initDiffDocs();
        }
      }).catch(err => {
        this.loading = false;
        console.error(err.message);
      });
    },
    confirmSelectData() {
      this.getAttachmentContent(this.singleSelect.url);
      if (this.singleSelect.id) {
        const str = !this.type ? 'lhs' : 'rhs';
        if (!this.type) {
          this.docLeft = this.singleSelect;
          this.leftLoading = true;
        } else {
          this.docRight = this.singleSelect;
          this.rightLoading = true;
        }
        this.getAttachmentContent(this.singleSelect.url, res => {
          $('#mergely').mergely(str, res);
          if (!this.type) {
            this.leftLoading = false;
          } else {
            this.rightLoading = false;
          }
        });
        this.visible = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-diff-wrap {
  margin: 16px 16px 0;
  background-color: #fff;
  min-height: calc(100vh - 80px);
  position: relative;
  .title-row {
    display: flex;
    align-items: center;
    height: 43px;
    .title-row-left, .title-row-right {
      width: 50%;
      padding: 0 14px 0 16px;
      display: flex;
      align-items: center;
      .title-row-title {
        font-size: 16px;
        font-weight: 500;
        font-family: PingFang SC, PingFang SC-Medium;
        color: #333333;
        margin: 0 8px;
        max-width: calc(100% - 300px);
      }
      .title-row-tail {
        color: #666666;
        font-size: 16px;
        margin-right: 8px;
        white-space: nowrap;
        flex: 1;
        text-align: right;
      }
      .diff-btn {
        background-color: #fff;
        color: #406EFF;
        border-color: #406EFF;
        font-size: 12px;
        padding: 5px 10px;
      }
    }
    .title-row-right {
      padding-right: 24px;
    }
  }
  .mergely-full-screen-8 {
    top: 43px;
    padding-bottom: 24px;
  }
  .fb-table {
    .latest {
      color: #406EFF;
      background-color: #F2F5FF;
      border-radius: 3px;
      font-size: 12px;
      margin-right: 5px;
      line-height: 16px;
      width: 32px;
      text-align: center;
      white-space: nowrap;
      padding: 3px 5px;
    }
    .attachment-name {
      flex: 1;
      max-width: calc(100% - 62px);
      color: #406EFF;
    }
    &::v-deep {
      .el-radio__label {
        padding-left: 0;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }
  #mergely {
    &::v-deep {
      #mergely-editor-rhs {
        top: 5px;
        position: relative;
      }
      .mergely.ch.d.lhs {
        color: #FD8546 !important;
        background-color: #fff;
        text-decoration: none !important;
      }
      .mergely.ch.a.rhs {
        color: #FF4E5F;
        background-color: #fff;
        text-decoration: line-through;
      }
      .mergely.c.lhs,
      .mergely.c.rhs,
      .mergely.d.lhs {
        border: none !important;
        background-color: #fff;
      }
      .mergely.a.rhs,
      .mergely.d.lhs.end,
      .mergely.d.rhs.start.end {
        border: none !important;
      }
      #mergely-splash {
        display: none !important;
      }
      .mergely-margin {
        opacity: 0;
      }
      .mergely-column {
        top: 5px;
        padding-left: 16px;
        border-radius: 8px;
        border-color: #fff;
        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16);
      }
      .CodeMirror pre.CodeMirror-line,
      .CodeMirror pre.CodeMirror-line-like {
        font-size: 14px;
        color: #000000;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
      }
      .mergely-canvas {
        visibility: hidden;
        width: 24px;
      }
      .CodeMirror-sizer {
        min-width: unset!important;
      }
      .CodeMirror-hscrollbar {
        overflow-x: hidden;
      }
      .CodeMirror-line  {
        white-space: initial;
      }
      .CodeMirror-code {
        .CodeMirror-line  {
          margin-bottom: 8px;
        }
      }
      .CodeMirror-cursors {
        display: none;
      }
      .cm-invalidchar,
      .cm-s-default .cm-error {
        opacity: 0;
      }
    }
  }
}
</style>
